<html manifest=node.manifest>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Arduino</title>
  <!--script type="text/javascript" src="../blockly_compressed.js"></script-->
  <script type="text/javascript" src="Blob.js"></script>
  <script type="text/javascript" src="FileSaver.min.js"></script>
  <script type="text/javascript" src="blockly_helper.js"></script>
  <script>
  // Whitelist of blocks to keep.
  /*var newLanguage = {}
  var keepers = ['controls_loop', 'controls_delay', 'control_map',
      //'setup_pinmode', 'output_digital_write', 'output_analog_write',
      //'controls_if', 'controls_if_if', 'controls_if_elseif',
      //'controls_if_else', 'controls_whileUntil', 'controls_for',
      //'controls_flow_statements',
      //'math_number','math_arithmetic',//'math_modulo',
      //'logic_compare', 'logic_operation', 'logic_negate', 'logic_boolean',
      //'variables_get','variables_set',
      //'procedures_defnoreturn', 'procedures_defreturn', 'procedures_callnoreturn', 'procedures_callreturn'
      ];
  for (var x = 0; x < keepers.length; x++) {
    newLanguage[keepers[x]] = Blockly.Language[keepers[x]];
  }
  // Fold control category into logic category.
  for (var name in newLanguage) {
    if (newLanguage[name].category == 'Math') {
      newLanguage[name].category = 'Logic';
    }
  }
  Blockly.Language = newLanguage;*/
  
/**
 * List of tab names.
 * @private
 */
var TABS_ = ['blocks', 'arduino', 'xml'];

var selected = 'blocks';

/**
 * Switch the visible pane when a tab is clicked.
 * @param {string} id ID of tab clicked.
 */
function tabClick(id) {
  // If the XML tab was open, save and render the content.
  if (document.getElementById('tab_xml').className == 'tabon') {
    var xmlTextarea = document.getElementById('textarea_xml');
    var xmlText = xmlTextarea.value;
    var xmlDom = null;
    try {
      xmlDom = Blockly.Xml.textToDom(xmlText);
    } catch (e) {
      var q =
          window.confirm('Error parsing XML:\n' + e + '\n\nAbandon changes?');
      if (!q) {
        // Leave the user on the XML tab.
        return;
      }
    }
    if (xmlDom) {
      Blockly.mainWorkspace.clear();
      Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xmlDom);
    }
  }

  // Deselect all tabs and hide all panes.
  for (var x in TABS_) {
    document.getElementById('tab_' + TABS_[x]).className = 'taboff';
    document.getElementById('content_' + TABS_[x]).style.display = 'none';
  }

  // Select the active tab.
  selected = id.replace('tab_', '');
  document.getElementById(id).className = 'tabon';
  // Show the selected pane.
  var content = document.getElementById('content_' + selected);
  content.style.display = 'block';
  renderContent();
}

/**
 * Populate the currently selected pane with content generated from the blocks.
 */
function renderContent() {
  var content = document.getElementById('content_' + selected);
  // Initialize the pane.
  if (content.id == 'content_blocks') {
    // If the workspace was changed by the XML tab, Firefox will have performed
    // an incomplete rendering due to Blockly being invisible.  Rerender.
    Blockly.mainWorkspace.render();
  } else if (content.id == 'content_xml') {
    var xmlTextarea = document.getElementById('textarea_xml');
    var xmlDom = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
    var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
    xmlTextarea.value = xmlText;
    xmlTextarea.focus();
  /*} else if (content.id == 'content_javascript') {
    content.innerHTML = Blockly.Generator.workspaceToCode('JavaScript');
  } else if (content.id == 'content_dart') {
    content.innerHTML = Blockly.Generator.workspaceToCode('Dart');
  } else if (content.id == 'content_python') {
    content.innerHTML = Blockly.Generator.workspaceToCode('Python');*/
  } else if (content.id == 'content_arduino') {
    //content.innerHTML = Blockly.Generator.workspaceToCode('Arduino');
    var arduinoTextarea = document.getElementById('textarea_arduino');
    arduinoTextarea.value = Blockly.Generator.workspaceToCode('Arduino');
    arduinoTextarea.focus();
  }
}

/**
 * Initialize Blockly.  Called on page load.
 * @param {!Blockly} blockly Instance of Blockly from iframe.
 */
function init(blockly) {
  //window.onbeforeunload = function() {
  //  return 'Leaving this page will result in the loss of your work.';
  //};

  window.Blockly = blockly;
  
  // var blockly_frame = document.getElementById("content_blocks");
  // Blockly.inject(blockly_frame, {path: '../../'});

  // Make the 'Blocks' tab line up with the toolbox.
  if (Blockly.Toolbox) {
    window.setTimeout(function() {
        document.getElementById('tab_blocks').style.minWidth =
            (Blockly.Toolbox.width - 38) + 'px';
            // Account for the 19 pixel margin and on each side.
      }, 1);
  }

  auto_save_and_restore_blocks();

  //load from url parameter (single param)
  //http://stackoverflow.com/questions/2090551/parse-query-string-in-javascript
  var dest = unescape(location.search.replace(/^.*\=/, '')).replace(/\+/g, " ");
  if(dest){
    load_by_url(dest);
  }
}
  </script>
  <style>
    body {
      background-color: white;
      font-family: sans-serif;
      margin: 0;
      padding:0;
      overflow: hidden;
    }
    .blocklySvg {
      height: 100%;
      width: 100%;
    }
    h1 {
      font-weight: normal;
      font-size: 140%;
    }
    td {
      vertical-align: top;
    }

    /* Tabs */
    #tabRow>td {
      border: 1px solid #ccc;
    }
    td.tabon {
      border-bottom-color: #ddd !important;
      background-color: #ddd;
      padding: 5px 19px;
    }
    td.taboff {
      cursor: pointer;
      padding: 5px 19px;
    }
    td.taboff:hover {
      background-color: #eee;
    }
    td.tabmin {
      border-top-style: none !important;
      border-left-style: none !important;
      border-right-style: none !important;
    }
    td.tabmax {
      border-top-style: none !important;
      border-left-style: none !important;
      border-right-style: none !important;
      width: 99%;
      text-align: right;
    }

    table {
      border-collapse: collapse;
      margin: 0;
      padding: 0;
      border: none;
    }
    td {
      padding: 0;
    }
    pre,
    #content_xml,
    #content_arduino {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      border: 1px solid #ccc;
      border-top-style: none;
      overflow: hidden;
      display: none;
    }
    #textarea_xml,
    #textarea_arduino {
      width: 100%;
      height: 100%;
      border: none;
      resize: none;
    }
    iframe {
      width: 100%;
      height: 100%;
      border: 1px solid #ccc;
      border-top-style: none;
    }
    button {
      padding: 1px 1em;
      font-size: 90%;
      border-radius: 4px;
      border: 1px solid #ddd;
      background-color: #eee;
      color: black;
    }
    button.launch {
      border: 1px solid #d43;
      background-color: #d43;
      color: white;
    }
    button:active {
      border: 1px solid blue !important;
    }
    button:hover {
      box-shadow: 2px 2px 5px #888;
    }
  </style>
</head>
<body>
  <table height="100%" width="100%">
    <tr>
      <td>
        <h1><a href="https://github.com/gasolin/BlocklyDuino/wiki">BlocklyDuino</a> &gt; web-based visual programming editor for arduino</h1>
      </td>
    </tr>
    <tr>
      <td>
        <table>
          <tr id="tabRow" height="1em">
            <td id="tab_blocks" class="tabon" onclick="tabClick(this.id)">Blocks</td>
            <td class="tabmin">&nbsp;</td>
            <!--td id="tab_javascript" class="taboff" onclick="tabClick(this.id)">JavaScript</td>
            <td class="tabmin">&nbsp;</td-->
            <!--td id="tab_dart" class="taboff" onclick="tabClick(this.id)">Dart</td>
            <td class="tabmin">&nbsp;</td>
            <td id="tab_python" class="taboff" onclick="tabClick(this.id)">Python</td>
            <td class="tabmin">&nbsp;</td-->
            <td id="tab_arduino" class="taboff" onclick="tabClick(this.id)">Arduino</td>
            <td class="tabmin">&nbsp;</td>
            <td id="tab_xml" class="taboff" onclick="tabClick(this.id)">XML</td>
            <td class="tabmax">
              <button onclick="discard()">Discard</button>
              <button onclick="save()">Save XML</button>
              <button id="fakeload">Load XML</button>
              <input type="file" id="load" style="display: none;"/>
              <!--button class="launch" onclick="runJS()">Run Program</button-->
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td height="99%">
        <iframe id="content_blocks" src="frame.html"></iframe>
		<!--div id="content_blocks" style="height:auto !important;height:400px; min-height:400px;"></div-->
        <!--pre id="content_javascript"></pre>
        <pre id="content_dart"></pre-->
        <div id="content_arduino">
          <textarea id="textarea_arduino" readonly></textarea>
        </div>
        <!--pre id="content_python"></pre-->
        <div id="content_xml">
          <textarea id="textarea_xml" readonly></textarea>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>
